<template>
  <view class="register-container" :style="{paddingTop: '0'}">
    <!-- 背景时尚元素点缀 -->
    <view class="fashion-elements">
      <view class="dot dot-1"></view>
      <view class="dot dot-2"></view>
      <view class="dot dot-3"></view>
      <view class="dot dot-4"></view>
      <view class="dot dot-5"></view>
      <view class="line line-1"></view>
      <view class="line line-2"></view>
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="triangle"></view>
    </view>
    
    <!-- #ifndef  H5 -->
    <u-navbar
      :is-back="true"
      title="注册"
      :title-bold="true"
      :border-bottom="false"
      :background="{ background: 'rgba(255,255,255,0.8)' }"
      z-index="999"
    ></u-navbar>
    <!-- #endif -->
    
    <view class="register-header">
      <view class="register-title">注册新账号</view>
      <view class="register-subtitle">欢迎加入我们，开启全新体验</view>
    </view>

    <view class="register-form">
      <view class="input-item">
        <u-input 
          v-model="mobile" 
          class="input" 
          placeholder="输入手机号码" 
          placeholder-class="input-placeholder"
          height="88"
        />
      </view>
      
      <view class="input-item verification-item" v-if="appConfig.register_setting">
        <u-input
          v-model="smsCode"
          class="input"
          placeholder="输入验证码"
          placeholder-class="input-placeholder"
          height="88"
        />
        <button
          class="verify-btn"
          :class="{ 'disabled-btn': mobile.length != 11 }"
          hover-class="btn-hover"
          @tap.stop="sendSmsFun"
        >
          <u-verification-code
            unique-key="register"
            ref="uCode"
            @change="codeChange"
          >
          </u-verification-code>
          <view class="verify-text">{{ codeTips }}</view>
        </button>
      </view>
      
      <view class="input-item">
        <u-input 
          type="password" 
          v-model="password" 
          placeholder="输入密码" 
          placeholder-class="input-placeholder"
          height="88"
        />
        <text class="eye-icon">
          <view class="iconfont icon-eye"></view>
        </text>
      </view>
      
      <view class="input-item">
        <u-input
          type="password"
          v-model="passwordConfirm"
          placeholder="请再次输入密码"
          placeholder-class="input-placeholder"
          height="88"
        />
        <text class="eye-icon">
          <view class="iconfont icon-eye"></view>
        </text>
      </view>

      <view class="input-item">
        <u-input 
          type="text" 
          v-model="code" 
          placeholder="邀请码（选填）" 
          placeholder-class="input-placeholder"
          height="88"
        />
      </view>
    </view>
    
    <view class="agreement-section">
      <u-checkbox 
        v-model="isAgreement" 
        shape="circle"
        active-color="#FF6B78"
      >
        <text class="agreement-text">已阅读并同意</text>
      </u-checkbox>
      <router-link to="/bundle/pages/server_explan/server_explan?type=0">
        <text class="agreement-link">《服务协议》</text>
      </router-link>
      <text class="agreement-text">和</text>
      <router-link to="/bundle/pages/server_explan/server_explan?type=1">
        <text class="agreement-link">《隐私协议》</text>
      </router-link>
    </view>
    
    <button 
      class="register-btn" 
      :class="{ 'disabled-btn': disable }"
      hover-class="btn-hover"
      @tap.stop="registerFun"
    >
      注册
    </button>
    
    <view class="login-link">
      已有账号？<text class="link-text" @tap="navigateToLogin">去登录</text>
    </view>
    
    <!-- 阅读协议弹框 -->
    <u-modal
      :value="showModel"
      show-cancel-button
      :show-title="false"
      @confirm="(isAgreement = true), (showModel = false)"
      @cancel="showModel = false"
      confirm-color="#FF6B78"
    >
      <view class="modal-content">
        <view class="modal-text">请先阅读并同意</view>
        <view class="modal-links">
          <router-link to="/bundle/pages/server_explan/server_explan?type=0">
            <text class="agreement-link">《服务协议》</text>
          </router-link>
          和
          <router-link to="/bundle/pages/server_explan/server_explan?type=1">
            <text class="agreement-link">《隐私协议》</text>
          </router-link>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { register, sendSms } from "@/api/app.js";
import { ACCESS_TOKEN } from "@/config/app.js";
import { SMSType } from "@/utils/type.js";
import { mapMutations, mapGetters } from "vuex";
import { INVITE_CODE } from "@/config/cachekey";
import Cache from "@/utils/cache";

export default {
  name: "register",
  created() {},
  data() {
    return {
      isAgreement: false,
      mobile: "",
      smsCode: "",
      password: "",
      passwordConfirm: "",
      canSendSms: true,
      codeTips: "",
      showModel: false,
      code: ""
    };
  },
  onLoad() {
    this.code = Cache.get(INVITE_CODE) || "";
  },
  methods: {
    ...mapMutations(["login"]),
    codeChange(tip) {
      this.codeTips = tip;
    },
    navigateToLogin() {
      uni.navigateBack();
    },
    registerFun() {
      let { isAgreement, mobile, password, smsCode, passwordConfirm, code } = this;

      if (mobile.length != 11) {
        this.$toast({ title: "请填写正确手机号" });
        return;
      }
      if (!password) {
        this.$toast({ title: "请设置密码" });
        return;
      }
      if (password != passwordConfirm) {
        this.$toast({ title: "两次密码输入不一致" });
        return;
      }
      if (!isAgreement) {
        return (this.showModel = true);
      }
      
      try {
        uni.vibrateShort(); // 触感反馈
      } catch(e) {
        console.log('Vibration not supported');
      }
      
      let data = {
        mobile: mobile,
        password: password,
        code: smsCode,
        client: 2,
        invite_code: code
      };
      
      register(data).then((res) => {
        if (res.code == 1) {
          this.login(data);
          this.$toast({ title: res.msg });
          // 跳转到登录页
          setTimeout(() => {
            // #ifdef H5
            uni.navigateTo({
              url: `/pages/webview/webview?url=${baseURL}${basePath}/down`
            });
            // #endif
            uni.navigateBack();
          }, 1000);
        }
      }).catch(err => {
        this.$toast({ title: "注册失败，请稍后重试" });
        console.error(err);
      });
    },

    countDownFinish() {
      this.canSendSms = true;
    },

    sendSmsFun() {
      if (!this.$refs.uCode.canGetCode) return;
      if (!this.mobile) {
        this.$toast({ title: "请填写手机号信息～" });
        return;
      }
      
      try {
        uni.vibrateShort(); // 触感反馈
      } catch(e) {
        console.log('Vibration not supported');
      }
      
      sendSms({ mobile: this.mobile, key: SMSType.REGISTER }).then((res) => {
        if (res.code == 1) {
          this.$toast({ title: res.msg });
          this.$refs.uCode.start();
        }
      }).catch(err => {
        this.$toast({ title: "发送验证码失败，请稍后重试" });
        console.error(err);
      });
    },
  },
  computed: {
    ...mapGetters(["appConfig"]),
    disable() {
      if (
        this.mobile.length == 11 &&
        this.password &&
        this.passwordConfirm &&
        this.smsCode &&
        this.appConfig.register_setting
      ) {
        return false;
      } else if (
        this.mobile.length == 11 &&
        this.password &&
        this.passwordConfirm &&
        !this.appConfig.register_setting
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #FFFFFF;
}

.register-container {
  padding: 60rpx 40rpx;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 时尚背景元素 */
.fashion-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
  
  .dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
  }
  
  .dot-1 {
    top: 10%;
    left: 10%;
    width: 10rpx;
    height: 10rpx;
    background-color: rgba(255, 107, 120, 0.3);
    animation: float 6s ease-in-out infinite;
  }
  
  .dot-2 {
    top: 20%;
    right: 15%;
    width: 15rpx;
    height: 15rpx;
    background-color: rgba(255, 69, 107, 0.3);
    animation: float 7s ease-in-out infinite 1s;
  }
  
  .dot-3 {
    bottom: 15%;
    left: 20%;
    width: 12rpx;
    height: 12rpx;
    background-color: rgba(255, 107, 120, 0.4);
    animation: float 8s ease-in-out infinite 0.5s;
  }
  
  .dot-4 {
    bottom: 25%;
    right: 10%;
    width: 8rpx;
    height: 8rpx;
    background-color: rgba(255, 69, 107, 0.3);
    animation: float 5s ease-in-out infinite 1.5s;
  }
  
  .dot-5 {
    top: 40%;
    right: 30%;
    width: 6rpx;
    height: 6rpx;
    background-color: rgba(255, 107, 120, 0.3);
    animation: float 9s ease-in-out infinite 2s;
  }
  
  .line {
    position: absolute;
    background-color: rgba(255, 107, 120, 0.1);
  }
  
  .line-1 {
    top: 15%;
    right: 5%;
    width: 80rpx;
    height: 1px;
    transform: rotate(45deg);
    animation: width-change 10s ease-in-out infinite;
  }
  
  .line-2 {
    bottom: 20%;
    left: 7%;
    width: 100rpx;
    height: 1px;
    transform: rotate(-30deg);
    animation: width-change 12s ease-in-out infinite 2s;
  }
  
  .circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 120, 0.1);
  }
  
  .circle-1 {
    top: -150rpx;
    right: -100rpx;
    width: 300rpx;
    height: 300rpx;
    animation: pulse 15s ease-in-out infinite;
  }
  
  .circle-2 {
    bottom: -200rpx;
    left: -150rpx;
    width: 400rpx;
    height: 400rpx;
    animation: pulse 18s ease-in-out infinite 3s;
  }
  
  .triangle {
    position: absolute;
    bottom: 40%;
    right: 5%;
    width: 0;
    height: 0;
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid transparent;
    border-bottom: 25rpx solid rgba(255, 107, 120, 0.1);
    transform: rotate(15deg);
    animation: rotate 20s linear infinite;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10rpx);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.15;
  }
}

@keyframes width-change {
  0%, 100% {
    width: 80rpx;
  }
  50% {
    width: 120rpx;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.register-header {
  margin-bottom: 50rpx;
  margin-top: 50rpx;
  
  .register-title {
    font-size: 44rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16rpx;
    position: relative;
    display: inline-block;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -6rpx;
      left: 0;
      width: 60rpx;
      height: 6rpx;
      background-image: linear-gradient(to right, #FF6B78, rgba(255, 107, 120, 0.3));
      border-radius: 3rpx;
    }
  }
  
  .register-subtitle {
    font-size: 28rpx;
    color: #999999;
  }
}

.register-form {
  margin-bottom: 30rpx;
  
  .input-item {
    height: 88rpx;
    background-color: #F8F8F8;
    border-radius: 50rpx;
    margin-bottom: 20rpx;
    position: relative;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    
    &:focus-within {
      transform: translateY(-2rpx);
      box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.04);
      border-color: #FF6B78;
    }
    
    .input {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      height: 88rpx;
      line-height: 88rpx;
    }
    
    .input-placeholder {
      color: #BBBBBB;
      font-size: 28rpx;
    }
    
    .eye-icon {
      color: #BBBBBB;
      font-size: 36rpx;
      padding: 0 10rpx;
    }
  }
  
  .verification-item {
    display: flex;
    justify-content: space-between;
    padding-right: 10rpx;
    
    .input {
      flex: 1;
      min-width: 0;
    }
    
    .verify-btn {
      height: 68rpx;
      margin: 0 6rpx;
      padding: 0 20rpx;
      background-color: #FFFFFF;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #666666;
      flex-shrink: 0;
      border: none;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
      
      &.disabled-btn {
        color: #CCCCCC;
      }
      
      &.btn-hover {
        background-color: #F8F8F8;
      }
      
      .verify-text {
        font-size: 24rpx;
        line-height: 1;
      }
    }
  }
}

.agreement-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 50rpx;
  font-size: 24rpx;
  
  .agreement-text {
    color: #999999;
    margin: 0 4rpx;
  }
  
  .agreement-link {
    color: #FF6B78;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 1rpx;
      background-color: rgba(255,107,120,0.5);
    }
  }
}

.register-btn {
  width: 100%;
  height: 100rpx;
  background-image: linear-gradient(to right, #FF6B78, #FF456B);
  border-radius: 50rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(255,107,120,0.2);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transition: all 0.8s ease;
    z-index: -1;
  }
  
  &:active:not(.disabled-btn) {
    transform: scale(0.98);
  }
  
  &.disabled-btn {
    opacity: 0.6;
  }
  
  &.btn-hover::before,
  &:hover::before {
    left: 100%;
  }
}

.login-link {
  text-align: center;
  font-size: 26rpx;
  color: #999999;
  
  .link-text {
    color: #FF6B78;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 1rpx;
      background-color: rgba(255,107,120,0.5);
    }
  }
}

.modal-content {
  padding: 40rpx 30rpx;
  
  .modal-text {
    font-size: 28rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .modal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    
    .agreement-link {
      color: #FF6B78;
    }
  }
}

/* 修复u-input组件内部样式 */
::v-deep .u-input__content__field-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

::v-deep .u-input__content__field {
  height: 88rpx;
  line-height: 88rpx;
}

::v-deep .u-checkbox__label {
  display: flex;
  align-items: center;
}
</style>